import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Namer App',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
            seedColor: const Color.fromARGB(255, 255, 3, 3)),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            '宝可梦大集结',
            style: TextStyle(
              color: Color.fromARGB(255, 255, 0, 0),
              fontSize: 24,
            ),
          ),
          backgroundColor: Color.fromARGB(255, 255, 255, 255),
        ),
        body: MyBody(),
      ),
    );
  }
}

class MyBody extends StatelessWidget {
  MyBody({super.key});

  @override
  Widget build(BuildContext context) {
    // return StackBody();
    // return StackList();
    // return MyAlign();
    return StackAlign();
  }
}

class StackAlign extends StatelessWidget {
  const StackAlign({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment.topLeft,
          child: Text("a"),
        ),
        Align(
          alignment: Alignment.topRight,
          child: Text("b"),
        ),
      ],
    );
  }
}

class MyAlign extends StatelessWidget {
  const MyAlign({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.red,
      // Align控制子元素的位置
      child: const Align(
        // 表示元素的坐标值，xy值范围都是-1~1
        alignment: Alignment(0.1, 0.5),
        child: Text("这是align里面的内容"),
      ),
    );
  }
}

class StackList extends StatelessWidget {
  final _tileList = <ListTile>[];

  StackList({super.key}) {
    for (int i = 0; i < 100; i++) {
      _tileList.add(ListTile(
        title: Text("data$i"),
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ListView(
          // 列表上方空出40像素，给导航栏预留位置
          padding: EdgeInsets.only(
            top: 40,
          ),
          children: _tileList,
        ),
        Positioned(
          left: 0,
          top: 0,
          height: 40,
          // 获取屏幕的宽度
          width: MediaQuery.of(context).size.width,
          child: Container(
            alignment: Alignment.center,
            color: Colors.blue,
            child: const Text(
              "导航栏",
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
        )
      ],
    );
  }
}

// Stack中的children会全部堆在一起，通过alignment参数控制相对于Stack组件堆叠的位置
class StackBody extends StatelessWidget {
  const StackBody({super.key});

  @override
  Widget build(BuildContext context) {
    // Stack相对于外部容器进行定位，如果没有外部容器，就是相对于屏幕进行定位
    return Stack(
      // children中所有元素相对于Stack组件居中
      alignment: Alignment.center,
      children: [
        Container(
          height: 200,
          width: 300,
          color: Colors.red,
        ),
        Container(
          height: 100,
          width: 100,
          color: Colors.blue,
        ),
        const Text("闪电鸟"),
        // Positioned可以控制组件在上级元素中的位置
        Positioned(
          left: 0,
          bottom: 0,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
        ),
        Positioned(
          right: 0,
          top: 0,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.green,
          ),
        ),
      ],
    );
  }
}
